<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5语义标签示例</title>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            line-height: 1.6;

            margin: 0;

            padding: 0;

            color: #333;

        }

        header, nav, main, section, article, aside, footer {

            padding: 20px;

            margin: 5px;

            border-radius: 4px;

        }

        header {

            background-color: #f8f9fa;

            border: 1px solid #e9ecef;

        }

        nav {

            background-color: #e9ecef;

        }

        nav ul {

            list-style: none;

            padding: 0;

            display: flex;

            gap: 15px;

        }

        nav a {

            text-decoration: none;

            color: #0d6efd;

        }

        main {

            display: flex;

            gap: 10px;

        }

        section {

            background-color: #fff3cd;

            flex: 3;

        }

        article {

            background-color: #d1ecf1;

            margin-bottom: 15px;

            padding: 15px;

        }

        aside {

            background-color: #d8f3dc;

            flex: 1;

        }

        footer {

            background-color: #f8f9fa;

            text-align: center;

            border: 1px solid #e9ecef;

        }

        h1, h2, h3 {

            margin-top: 0;

        }

    </style>

</head>

<body>

    <!-- 页面头部，通常包含标题和导航 -->

    <header>

        <h1>网站标题</h1>

        <p>这是网站的副标题或简短描述</p>

    </header>



    <!-- 导航栏，包含网站主要导航链接 -->

    <nav>

        <ul>

            <li><a href="#">首页</a></li>

            <li><a href="#">文章</a></li>

            <li><a href="#">分类</a></li>

            <li><a href="#">关于我们</a></li>

        </ul>

    </nav>



    <!-- 页面主要内容区域 -->

    <main>

        <!-- 主要内容部分 -->

        <section>

            <h2>最新文章</h2>

            

            <!-- 独立的文章内容 -->

            <article>

                <h3>HTML5语义化标签的优势</h3>

                <p>发布日期: 2023-10-01</p>

                <p>HTML5语义化标签使网页结构更清晰，便于搜索引擎理解内容，同时提高了代码的可维护性...</p>

                <a href="#">阅读全文</a>

            </article>

            

            <article>

                <h3>如何优化网站性能</h3>

                <p>发布日期: 2023-09-25</p>

                <p>网站性能优化包括图片压缩、代码精简、缓存策略等多个方面，良好的性能可以提升用户体验...</p>

                <a href="#">阅读全文</a>

            </article>

        </section>



        <!-- 侧边栏，通常包含补充信息 -->

        <aside>

            <h3>热门分类</h3>

            <ul>

                <li><a href="#">前端开发</a></li>

                <li><a href="#">后端技术</a></li>

                <li><a href="#">数据库</a></li>

            </ul>

            

            <h3>关于本站</h3>

            <p>这是一个技术分享网站，专注于Web开发相关知识的传播。</p>

        </aside>

    </main>



    <!-- 页脚，通常包含版权信息等 -->

    <footer>

        <p>&copy; 2023 技术分享网站 - 保留所有权利</p>

        <p>联系方式: contact@example.com</p>

    </footer>

</body>

</html>